<template>
    <div class="log message">
        <Tabs v-model:active="active">
            <Tab v-if="notiStore.types.includes('suggestList')" title="反馈管理" :name="1" :dot="!!adminSuggestList.total">
                <div class="blank"></div>
                <div style="background-color: var(--van-background-2);">
                    <Empty v-if="adminSuggestList.list.length === 0"></Empty>
                    <template v-for="(row, index) in adminSuggestList?.list" :key="index">
                        <div class="item" v-if="index < 5" @click="onRead2(row.id)">
                            <div class="title">{{ row.content }}</div>
                            <div class="time">{{ row.createdAt }}</div>
                        </div>
                    </template>
                </div>
            </Tab>
            <Tab v-if="notiStore.types.includes('suggest')" title="我的反馈" :name="2" :dot="!!suggestList.total">
                <div class="blank"></div>
                <div style="background-color: var(--van-background-2);">
                    <Empty v-if="suggestList.list.length === 0"></Empty>
                    <template v-for="(row, index) in suggestList?.list" :key="index">
                        <div class="item" v-if="index < 5" @click="onRead1(row.SuggestId)">
                            <div class="title">{{ row.content }}</div>
                            <div class="time">{{ row.createdAt }}</div>
                        </div>
                    </template>
                </div>
            </Tab>
            <Tab v-if="notiStore.types.includes('message')" title="消息" :name="3" :dot="!!groupList.total">
                <div class="blank"></div>
                <ListItem :instance="groupList"></ListItem>
                <div class="textbutton account" @click="router.push('account')">前往通知中心</div>
            </Tab>
        </Tabs>
    </div>
</template>
<script setup lang="ts">
import ListItem from "@b/srcm/components/group/group_list.vue";
import { ref, watch } from "vue";
import { Tabs, Tab, Empty } from "vant";
import { useRouter } from "vue-router";
import { NotiStore } from "@b/model/store/notification";
import { navBarStore } from "@b/store";

const router = useRouter()
const active = ref(1)
const notiStore = new NotiStore()
const suggestList = notiStore.suggestList
const groupList = notiStore.groupList
const adminSuggestList = notiStore.adminSuggestList

watch(() => notiStore.total, (value) => {
    navBarStore().setNavBar('未读消息(' + value + ')')
})
const onRead1 = (SuggestId?: string) => {
    router.push('suggestSelfInfo?id=' + SuggestId)
}
const onRead2 = async (SuggestId?: string) => {
    await router.push("suggestInfo?id=" + SuggestId)
};
</script>

<style scoped>
.message :deep(.van-icon__image) {
    width: 40px;
    height: 40px;
    border-radius: 14px;
}

.message :deep(.van-cell__left-icon) {
    margin-right: 10px;
}

.img {
    width: 50px;
    height: 50px;
    margin-left: 8px;
}

.item {
    display: flex;
    padding: 12px;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
}

.item .avatar {
    width: 40px;
    min-width: 40px;
    height: 40px;
    margin-right: 12px;
    border-radius: 12px;
}

.item .title {
    color: var(--el-text-color-secondary);
    font-size: 0.75em;
    min-width: 5em;
}

.item .center {
    flex-grow: 1;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    margin-right: 4px;
}

.item .time {
    margin-top: 4px;
    font-size: 0.8rem;
}

.account {
    text-align: center;
    padding-top: 6px;
}
</style>